<template>
    <div>
        <h3>slot</h3>
        <ul>
            <li>匿名插槽:没有名字的插槽</li>
            <li>具名插槽:可以根据名字指定插槽展示的位置</li>
            <li>作用域插槽:组件通信的方式.提起这个作用域插槽</li>
            <li>
                子组件的数据传递到父组件.在父组件处理好之后.DOM结构传回给子组件
            </li>
        </ul>
        <baseTable>
            <template v-slot:table="slotProps">
                {{ slotProps.children }}
                <table>
                    <tr>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>身份信息</td>
                    </tr>
                    <tr>
                        <td>苏明</td>
                        <td>33</td>
                        <td>具体信息</td>
                    </tr>
                </table>
            </template>
            <template v-slot:tableHeader>
                <h2>员工信息列表</h2>
            </template>

            <!-- <template slot="tableHeader">
                <h2>员工信息列表</h2>
            </template> -->
        </baseTable>
    </div>
</template>

<script>
import baseTable from "./slot/baseTable";
export default {
    components: { baseTable },
    props: {},
    data() {
        return {};
    },
    computed: {},
    methods: {},
    created() {},
    mounted() {}
};
</script>
<style scoped></style>
